<template>
  <div class="pie-outer">
    <div class="pie">
      <i class="pie-ic"></i>
      <svg
        width="2.4rem" height="2.4rem"
        xmlns="http://www.w3.org/2000/svg">
        <!-- 红色圆圈，固定360度圆圈 -->
        <circle
          cx="1.2rem" cy="1.2rem" r="0.85rem"
          stroke-width="0.16rem"
          stroke="red"
          fill="none"
          :stroke-dasharray="HdashArray"
          :stroke-dashoffset="1"
        ></circle>
<!--       黄色百分比-->
        <circle
          class="h-progress"
          cx="1.2rem" cy="1.2rem" r="0.85rem"
          stroke-width="0.16rem"
          stroke="#FFBB1A"
          fill="none"
          :stroke-dasharray="HdashArray"
          :stroke-dashoffset="HoffSet"
        ></circle>
        
      </svg>
    </div>
    <div class="pie-text">
      <ul>
        <li v-for="item in pieList" :key="item" id="outer">
          <i :class="item.name == '高' ? 'h-point' : 'm-point' "></i>
          <span>{{item.name}}级别告警：{{item.per>100? item.per/100+'%': item.per+'%'}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {ref,onMounted} from "vue";
import http from '../api/api-index'

export default {
  name: "SystemPie",
  props:{
    pieList:{
      type:Array,
      default(){
        return []
      }
    }
  },
  watch:{
    pieList:{
      handler(data){
        var screenWidth = document.documentElement.clientWidth;
        var currentFontSize = screenWidth * 100 / 1920;
        this.HdashArray = 2 * Math.PI * 0.85 * currentFontSize //周长
        for(let i = 0;i<data.length;i++){
          if(data[i].name == '高'){
            this.HoffSet = Number(data[i].per)/100 * this.HdashArray //占周长百分比
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  data(){
    return{
      r:85,
      HdashArray: 0,
      // 高级别占比
      HoffSet: 0,
      // 中级别占比
      MoffSet: 0,
    }
  }
}
</script>

<style lang="scss" scoped>
.pie-outer{
  max-width: 3.00rem;
  max-height: 3.00rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  .pie{
    width: 2.4rem;
    height: 2.4rem;
    position: relative;
    background: url("../assets/btzs@2x.png") no-repeat center;
    background-size: 100% 100%;
    svg{
      transform: rotate(-90deg);
    }
    .pie-ic{
      position: absolute;
      left: 0.96rem;
      top: 0.96rem;
      width: 0.48rem;
      height: 0.48rem;
      background: url("../assets/ic_ling@2x.png") no-repeat;
      background-size: 0.48rem 0.48rem;
    }
  }
  .pie-text{
    width: 2.60rem;
    height: 0.40rem;
    i{
      display: block;
      margin-right: 0.03rem;
    }
    i::before{
      content:'';
      display: block;
      width:0.08rem;
      height:0.08rem;
      border-radius: 50%;
    }
    ul{
      height: 0.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.15rem;
      li{
        font-family: PingFangSC-Regular;
        font-size: 0.14rem;
        letter-spacing: 0;
        line-height: 0.2rem;
        height: 0.2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .h-point{
        background-color: #DC1C1C;
        border-radius: 50%;
      }
      .m-point{
        background-color: #FFBB1A;
        border-radius: 50%;
      }
    }
  }
}
</style>
